import {messages} from "share/common";
import React from 'react';
import {
  Card,
  Row,
  Col,
  Checkbox,
  Input,
  Badge
} from 'antd';

class FormItemAirlineVendor extends React.Component {
  constructor(props) {
    super(props);
    const value = props.value || {};
    this.state = {
      vendorInfo: {
        vendorName: value.vendorName || 'e',
        vendorEnabled: value.vendorEnabled || false,
        isEnabled: value.isEnabled || false,
        account: value.account || {}
      }
    };
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      vendorInfo: nextProps.value
    });
  }
  setEnableStatus = (e) => {
    this.triggerChange({
      isEnabled: e.target.checked
    });
  }
  handleInput = (e, key) => {
    const account = {...this.state.vendorInfo.account};
    account[key] = e.target.value;
    const allFieldsFilled = Object.values(account).every(Boolean);
    if (allFieldsFilled) {
      this.triggerChange({ account });
    } else {
      this.triggerChange({
        account,
        isEnabled: false
      });
    }
  }
  triggerChange = (changedValue) => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(Object.assign({}, this.state.vendorInfo, changedValue));
    }
  }
  renderTitle = (title, status) => (
    <div>
      <span>{title}</span>
      <Badge
        style={{fontWeight: 'normal', paddingLeft: '16px'}}
        status={status ? 'success' : 'default'}
        text={status ? messages('supplier.key284')/*正常*/ : messages('supplier.key157')/*未启用*/}/>
    </div>
  )
  render = () => {
    const { vendorInfo } = this.state;
    const allFieldsFilled = Object.values(vendorInfo.account).every(Boolean);
    return (<Card
      type="inner"
      title={this.renderTitle(vendorInfo.vendorName, vendorInfo.vendorEnabled)}
    >
      <Row>
        <Col span={4}>
          <h4>{messages('supplier.key226')/*是否启用*/}</h4>
          <Checkbox
            disabled={!allFieldsFilled}
            onChange={this.setEnableStatus}
            checked={vendorInfo.isEnabled}>{messages('common.status.enable')/*启用*/}</Checkbox>
        </Col>
        <Col span={20}>
          <Row gutter={16}>{
            Object.entries(vendorInfo.account).map((setting) => {
              return (<Col span={12}>
                <div style={{marginBottom: '4px'}}>{setting[0]}</div>
                <Input
                  style={{marginBottom: '12px'}}
                  onChange={e => this.handleInput(e, setting[0])}
                  value={setting[1]}
                />
              </Col>);
            })
          }</Row>
        </Col>
      </Row>
    </Card>);
  }
}

export default FormItemAirlineVendor;
